import { Col, Row } from 'antd';
import ChartCard from '../ChartCard';

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: {
    marginBottom: 24,
  },
};

const IntroduceRow = () => {
  return (
    <Row gutter={24}>
      <Col {...topColResponsiveProps}>
        <ChartCard
          style={{
            backgroundColor: 'rgba(132,250,176,0.77)',
          }}
          bordered={false}
          title="总销售额"
          total={() => <span>126560</span>}
          contentHeight={46}
        ></ChartCard>
      </Col>

      <Col {...topColResponsiveProps}>
        <ChartCard
          style={{
            backgroundColor: 'rgba(79,191,168,0.72)',
          }}
          bordered={false}
          title="访问量"
          total={8846}
          contentHeight={46}
        ></ChartCard>
      </Col>
      <Col {...topColResponsiveProps}>
        <ChartCard
          style={{
            backgroundColor: 'rgba(143,229,244,0.73)',
          }}
          bordered={false}
          title="支付笔数"
          total={6560}
          contentHeight={46}
        ></ChartCard>
      </Col>
      <Col {...topColResponsiveProps}>
        <ChartCard
          style={{
            backgroundColor: 'rgba(143,211,244,0.72)',
          }}
          bordered={false}
          title="运营活动效果"
          total="78%"
          contentHeight={46}
        ></ChartCard>
      </Col>
    </Row>
  );
};
export default IntroduceRow;
